<template>
  <div>
    <p v-color="b">自定义指令示例</p>
  <div v-color="g">自定义指令示例</div>
  <my-test></my-test>
  </div>
</template>

<script>
import MyTest from './components/MyTest.vue'
export default {
  components: { MyTest },
  data() {
  return {
    b: 'red',
      g: 'green'
    }
  },
  directives: {
    // color: {
    //   // 页面DOM渲染后，使用 v-color 指令的元素会调用一次bind函数
    //   bind: function (el, obj) {
    //     // el 是使用 v-color 指令的DOM元素
    //     // obj 对象的 value 属性，就是传递的 pink 参数
    //     el.style.color = obj.value
    //   },
    //   update(el, obj) {
    //     el.style.color = obj.value
    //   }
    // }
    color(el,obj) {
      el.style.color = obj.value
    }
  }
}
</script>